<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">

    <div class=" form-group ">
        <label class="control-label col-xs-12 col-sm-2 ">{:__('Producttype')}:</label>
        <div class="col-xs-12 col-sm-8 ">

            <div class="radio ">
                <select id="c-producttype" class="form-control" name="row[producttype]">
   
                {foreach name="producttypelist " item="vo "}
<option value="{$key}" {in name="key" value="product"}selected{/in}>{$vo}</option>

                
                {/foreach}
            </select>
            </div>

        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Productid')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-productid" data-rule="required" data-source="clothmaking_product/index" data-field="name" class="form-control selectpage" name="row[productid]" type="text" value="{$productid}"></input>
        </div>

    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Recipe_id')}:</label> 
        <div class="col-xs-12 col-sm-8">
            <input id="c-recipe_id" data-rule="required" data-source="clothmaking_recipe/index" data-field="title" class="form-control selectpage" name="row[recipe_id]" type="text" value=""></input>
        </div>       
        </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Quantity')}:</label>
        <div class="col-xs-12 col-sm-8 location-relative">
            <input id="c-quantity" data-rule="required"  class="form-control" name="row[quantity]" value="{$quantity}" type="number">
            <span class="location-absolute">m²</span>
        </div>
    </div>
    
    
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Thickness_min')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-thickness_min" class="form-control" name="row[thickness_min]" type="number">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Thickness_max')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-thickness_max"  class="form-control" name="row[thickness_max]" type="number">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Spring_min')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-spring_min"  class="form-control" name="row[spring_min]" type="number">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Spring_max')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-spring_max"  class="form-control" name="row[spring_max]" type="number">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Density_min')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-density_min"  class="form-control" name="row[density_min]" type="number">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Density_max')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-density_max" class="form-control" name="row[density_max]" type="number">
        </div>
    </div>


    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Hardness_min')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-hardness_min"  class="form-control" name="row[hardness_min]" type="number">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Hardness_max')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-hardness_max" class="form-control" name="row[hardness_max]" type="number">
        </div>
    </div>

    
   
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Grain')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="radio">
                <label>
            <input  name="row[grain]" type="radio" value="1" checked>有</label>
                <label>
                <input  name="row[grain]" type="radio" value="2">无</label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Csamples')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="radio">
                <label>
            <input  name="row[csamples]" type="radio" value="1" checked>有</label>
                <label>
                <input  name="row[csamples]" type="radio" value="2">无</label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Psamples')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="radio">
                <label>
            <input name="row[psamples]" type="radio" value="1" checked>有</label>
                <label>
                <input  name="row[psamples]" type="radio" value="2">无</label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">应力应变:</label>
        <div class="col-xs-12 col-sm-8">
            <input type="number" name="row[mpa1]" class="form-control" style="width: 30%;">
            <input type="number" name="row[mpa2]" class="form-control" style="width: 30%;">
            <input type="number" name="row[mpa3]" class="form-control" style="width: 30%;">
        </div>
    </div>

    <!-- <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Quantity')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-quantity"  class="form-control" name="row[quantity]" type="number">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Deliverytime')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-deliverytime" class="form-control datetimepicker" data-date-format="YYYY-MM-DD HH:mm:ss" data-use-current="true" name="row[deliverytime]" type="text" value="{:date('Y-m-d H:i:s')}">
        </div>
    </div> -->
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Status')}:</label>
        <div class="col-xs-12 col-sm-8">

            <div class="radio">
                {foreach name="statusList" item="vo"}
                <label for="row[status]-{$key}"><input id="row[status]-{$key}" name="row[status]" type="radio" value="{$key}" {in name="key" value="normal"}checked{/in} /> {$vo}</label> {/foreach}
            </div>

        </div>
    </div>
   
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Weigh')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-weigh" class="form-control" name="row[weigh]" type="number" value="0">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Boiler_ids')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-boiler_ids"  data-multiple="true"  data-source="clothmaking_boiler/boiler/index" data-field="alias" class="form-control selectpage" name="row[boiler_ids]" type="text" value="">

        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Deliverytime')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-deliverytime" data-rule="required" class="form-control datetimepicker" data-date-format="YYYY-MM-DD HH:mm:ss" data-use-current="true" name="row[deliverytime]" type="text" value="{:$row.deliverytime?datetime($row.deliverytime):''}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Mark')}:</label>
        <div class="col-xs-12 col-sm-8">
            <textarea id="c-mark" class="form-control" name="row[mark]"></textarea>

        </div>
    </div>

    <input type="hidden" id="c-orderproduct_id" name="row[orderproduct_id]" value="{$orderproduct_id}"/>

    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-primary btn-embossed disabled">{:__('OK')}</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
        </div>
    </div>
</form>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    debugger
    $(document).ready(function() {
    $.ajax({
        url: '/aNVxAODluZ.php/clothmaking_product/index/index',
        type: 'GET',
        dataType: 'json',
        data: {
            addtabs: 1,
            sort: 'weigh',
            order: 'desc',
            offset: 0,
            limit: 10,
            filter: JSON.stringify({}), // 空过滤条件
            op: JSON.stringify({}),     // 空操作符
            _: Date.now()              // 时间戳防缓存
        },
        headers: {
            'X-Requested-With': 'XMLHttpRequest'
        },
        success: function(res) {
            console.log('总记录数:', res.total);
            console.log('产品列表:', res.rows);
            },
        error: function(xhr) {
            console.error('请求失败:', xhr.statusText);
        }
    });

});
$(document).ready(function() {
    // 监听产品选择和数量输入
    $('#c-productid, #c-quantity').on('change keyup', calculateProductUnits);

    function calculateProductUnits() {
        const productId = $('#c-productid').val();
        const quantity = parseFloat($('#c-quantity').val()) || 0;
        
        // 获取选中的产品数据
        const selectedProduct = window.productData?.rows.find(item => item.id == productId);
        
        if (!selectedProduct || !selectedProduct.length || !selectedProduct.width) {
            removeResultRow();
            return;
        }

        // 计算产品面积（平方米）
        const productArea = (selectedProduct.length/1000 * selectedProduct.width); // 转换为平方米
        const fullUnits = Math.floor(quantity / productArea);
        const remainingArea = (quantity % productArea).toFixed(2);

        // 显示计算结果
        showResultRow(fullUnits, remainingArea);
    }

    function showResultRow(units, remaining) {
        // 如果结果行已存在则更新，否则创建
        let $resultRow = $('#product-calculation-row');
        
        if ($resultRow.length === 0) {
            $resultRow = $(`
                <div class="form-group" id="product-calculation-row">
                    <label class="control-label col-xs-12 col-sm-2">用料计算:</label>
                    <div class="col-xs-12 col-sm-8">
                        <div class="form-control-static">
                            <span id="calculation-result"></span>
                        </div>
                    </div>
                </div>
            `).insertAfter($('#c-quantity').closest('.form-group'));
        }

        $('#calculation-result').html(`
            共需 <strong>${units}</strong> 个完整产品 + 
            剩余 <strong>${remaining}</strong> 平方米
        `);
    }

    function removeResultRow() {
        $('#product-calculation-row').remove();
    }

    // 存储产品数据供后续使用
    $.ajax({
        url: '/aNVxAODluZ.php/clothmaking_product/index/index',
        type: 'GET',
        data: { limit: 1000 }, // 获取所有产品
        success: function(res) {
            window.productData = res; // 全局存储
            calculateProductUnits(); // 初始计算
        }
    });
});
</script>
<style>
    .location-relative {
        position: relative;
    }
    .location-absolute {
        position: absolute;
        top: 5px;
        right: 45px;
    }
</style>